import React, { useEffect } from 'react'
import { Table, Space, Input} from 'antd'

import './service.less'

const { TextArea } = Input;

const ServiceInfo = props => {

    const { id } = props

    useEffect(() => {
        console.log("update-->", id)
    }, null)

    const data = [
        {
            key: '1',
            version: 'v-1.0',
            status: 'true'
        },
        {
            key: '2',
            version: 'v-2.0',
            status: 'false'
        },
        {
            key: '3',
            version: 'v-3.0',
            status: 'false'
        }
    ]

    const columns = [
        {
            title: '版本',
            dataIndex: 'version',
            key: 'version'
          },
          {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: text => {
                return (text === 'true') ? '使用中' : '未使用'
            }
          },
          {
            title: '操作',
            key: 'action',
            render: (text, record) => (
              <Space size="middle">
                <a>启动</a>
                <a>停止</a>
              </Space>
            )
          },
    ]

    return (
        <div className="service-wrapper">
            <div className="service-datainfo">
                <div className="service-datainfo-row">
                    <div className="service-row-title">模型名称：</div>
                    <Input />
                </div>
                <div className="service-datainfo-row">
                    <div className="service-row-title">运行状态：</div>
                    <Input />
                </div>
                <div className="service-datainfo-row">
                    <div className="service-row-title">发布用户：</div>
                    <Input />
                </div>
                <div className="service-datainfo-row">
                    <div className="service-row-title">请求类型：</div>
                    <Input />
                </div>
                <div className="service-datainfo-text">
                    <div className="service-row-title">请求地址：</div>
                    <TextArea defaultValue="http://192.168.5.33:8088/predict/pmml/xxxx/xxxx/xxxx" />
                </div>
                <div className="service-datainfo-row">
                    <div className="service-row-title">请求秘钥：</div>
                    <Input />
                </div>
            </div>
            <Table columns={columns} dataSource={data} />
        </div>
    )
}

export default ServiceInfo